<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/cart.css">
    <link rel="stylesheet" href="../css/retset.css">

    <style>
    </style>
</head>

<body>
    <div id="top">
        <div class="top_title">
            <div class=left>
                <em><img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt=""></em>
                <h3>我的购物车</h3>
                <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
            </div>
            <div class="right">
                <button class="noLogin" style="display: none;">
                    <!-- <dd class="noLogin" style="display: none;"> -->
                    <a href="../html/log.html">登录</a>
                    <a href="../html/reg.html">注册</a>
                    <!-- </dd> -->
                    <button class="login" style="display: none;">xx</button>

                </button>
                <!-- <div class="this_own"> -->
                <!-- <div class="own_middle"> -->
                <!-- <p><a href="../html/personal.html">个人中心</a></p>
                        <p><a href="">小米账户</a></p> -->

                <!-- </div> -->
                <!-- </div> -->
                <div class="loginOut" style="float: left;margin-right: 10px;">退出账号</div>
                <div class="mythis"><a href="../html/personal.html">个人中心</a></div>

                <div class="myorder"><a href="" style="color: inherit;
                    text-decoration: none;">我的订单</a></div>
                <div class="myorder-list"><a href="../html/list.html" style="color: inherit;
                    text-decoration: none;">商品列表</a></div>
            </div>

        </div>
    </div>
    <div id="list">
        <div class="main">
            <h3 class="empty">购物车空空如也 , <a href="./list.html" style="color: inherit;
                text-decoration: none;">立即逛逛</a> </h3>

            <div class="catbox">
                <table id="cartTable">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" class="checkAll" />全选
                            </th>
                            <th>图片</th>
                            <th>商品</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>小计</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- <tr>
                    <td class="checkbox">
                        <input class="checkone" type="checkbox" />
                    </td>
                    <td class="goods">
                        <span>商品1</span>
                    </td>
                    <td class="price">5999.88</td>
                    <td>
                        <span>手表</span>
                    </td>
                    <td class="count">
                        <span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation">
                        <span class="delete">删除</span>
                    </td>
                </tr> -->
                    </tbody>
                </table>
                <div class="foot" id="foot">
                    <a id="deleteAll" style="color: inherit;text-decoration: none;">删除</a>
                    <div class="fr closing">结 算</div>
                    <input type="hidden" id="priceAll" />
                    <div class="fr total">合计：<span id="priceTotal">0.00</span>元</div>
                    <div class="fr selected" id="selected">已选商品<span id="chooseAll">0</span>件</div>

                </div>
            </div>
        </div>
    </div>

    <div id="paged">
        <div class="paged_x">
            <h3><span>买购物车中商品的人还买了</span></h3>
            <ul>
                <li>
                    <a href="">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4ec91237114f30967ee1c9d4ae88e4ef.jpg?thumb=1&w=203&h=203&f=webp&q=90"
                            alt="">
                        <h4>米家防飞溅指甲刀</h4>
                        <p>12.9元</p>
                        <strong>89.5万人好评</strong>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a0a2d0e19b518c87e8157c58388a7f21.jpg?thumb=1&w=203&h=203&f=webp&q=90"
                            alt="">
                        <h4>米家防飞溅指甲刀</h4>
                        <p>12.9元</p>
                        <strong>89.5万人好评</strong>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5afc0b5d19db30a62ed15b5435008033.jpg?thumb=1&w=203&h=203&f=webp&q=90"
                            alt="">
                        <h4>米家防飞溅指甲刀</h4>
                        <p>12.9元</p>
                        <strong>89.5万人好评</strong>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fffc0a962387dff2f70aeb009ddf69ff.jpg?thumb=1&w=203&h=203&f=webp&q=90"
                            alt="">
                        <h4>米家防飞溅指甲刀</h4>
                        <p>12.9元</p>
                        <strong>89.5万人好评</strong>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/843005cf3d2771e47158657097dedf9f.jpg?thumb=1&w=203&h=203&f=webp&q=90"
                            alt="">
                        <h4>米家防飞溅指甲刀</h4>
                        <p>12.9元</p>
                        <strong>89.5万人好评</strong>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/843005cf3d2771e47158657097dedf9f.jpg?thumb=1&w=203&h=203&f=webp&q=90"
                            alt="">
                        <h4>米家防飞溅指甲刀</h4>
                        <p>12.9元</p>
                        <strong>89.5万人好评</strong>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/843005cf3d2771e47158657097dedf9f.jpg?thumb=1&w=203&h=203&f=webp&q=90"
                            alt="">
                        <h4>米家防飞溅指甲刀</h4>
                        <p>12.9元</p>
                        <strong>89.5万人好评</strong>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/843005cf3d2771e47158657097dedf9f.jpg?thumb=1&w=203&h=203&f=webp&q=90"
                            alt="">
                        <h4>米家防飞溅指甲刀</h4>
                        <p>12.9元</p>
                        <strong>89.5万人好评</strong>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/843005cf3d2771e47158657097dedf9f.jpg?thumb=1&w=203&h=203&f=webp&q=90"
                            alt="">
                        <h4>米家防飞溅指甲刀</h4>
                        <p>12.9元</p>
                        <strong>89.5万人好评</strong>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/843005cf3d2771e47158657097dedf9f.jpg?thumb=1&w=203&h=203&f=webp&q=90"
                            alt="">
                        <h4>米家防飞溅指甲刀</h4>
                        <p>12.9元</p>
                        <strong>89.5万人好评</strong>
                    </a>
                </li>
            </ul>

        </div>
    </div>

    <div id="footer">
        <div class="footer-service">
            <ul class="list-service clearfix">
                <li class="first"><a href="" class="iconfont icon-weixiubaoyang">预约维修项目</a></li>
                <li><a href="" class="iconfont icon-7tianbaotuihuan"></a>7天无理由退货</a></li>
                <li><a href="" class="iconfont icon-tianbaotui">15天免费换货</a></li>
                <li><a href="" class="iconfont icon-baoyou">满69元包邮</a></li>
                <li><a href="" class="iconfont icon-dizhi">520余家售后网点</a></li>
            </ul>
        </div>
        <div class="footer-links">
            <dl class="col-links">
                <dt>帮助中心</dt>
                <dd style="color: #757575;margin: 10px 0 0;font-size: 12px;"><a href="">账户管理</a></dd>
                <dd><a href="">购物指南</a></dd>
                <dd><a href="">订单操作</a></dd>
            </dl>
            <dl class="col-links">
                <dt>服务支持</dt>
                <dd><a href="">售后政策</a></dd>
                <dd><a href="">自助服务</a></dd>
                <dd><a href="">相关下载</a></dd>
            </dl>
            <dl class="col-links">
                <dt>线下门店</dt>
                <dd><a href="">小米之家</a></dd>
                <dd><a href="">服务网点</a></dd>
                <dd><a href="">授权体验店/专区</a></dd>
            </dl>
            <dl class="col-links">
                <dt>关于小米</dt>
                <dd><a href="">了解小米</a></dd>
                <dd><a href="">加入小米</a></dd>
                <dd><a href="">投资者关系</a></dd>
                <dd><a href="">企业社会责任</a></dd>
                <dd><a href="">廉洁举报</a></dd>
            </dl>
            <dl class="col-links">
                <dt>关注我们</dt>
                <dd><a href="">新浪微博</a></dd>
                <dd><a href="">官方微信</a></dd>
                <dd><a href="">联系我们</a></dd>
                <dd><a href="">公益基金会</a></dd>
            </dl>
            <dl class="col-links">
                <dt>特色服务</dt>
                <dd><a href="">F码通道</a></dd>
                <dd><a href="">礼物码</a></dd>
                <dd><a href="">防伪查询</a></dd>
            </dl>
            <div class="col-contact">
                <p class="phone">400-100-5678</p>
                <p>8:00-18:00（仅收市话费）</p>
                <a rel="nofollow" class="btn btn-line-primary btn-small J_contactBtn"> <i class="iconfont icon-duanxin"
                        style="color: #ff6700;"></i> 人工客服 </a>
                <div class="follow">
                    关注小米
                    <a href="https://weibo.com/xiaomishangcheng" target="_blank" class="wb"></a>
                </div>
            </div>
        </div>
    </div>
    <div id="site-info">
        <div class="container">
            <div class="logo ir"></div>
            <div class="info-text">
                <p class="sites"><a rel="nofollow" href="//www.mi.com/index.html" target="_blank">小米商城</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//www.miui.com/" target="_blank">MIUI</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//home.mi.com/index.html" target="_blank">米家</a>
                    <span class="sep">|</span> <a rel="nofollow" href="http://www.miliao.com/" target="_blank">米聊</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//www.duokan.com/" target="_blank">多看</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//game.xiaomi.com/" target="_blank">游戏</a> <span
                        class="sep">|</span> <a rel="nofollow"
                        href="//b.mi.com/?client_id=180100031058&amp;masid=17409.0358" target="_blank">政企服务</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//xiaomi.tmall.com/" target="_blank">小米天猫店</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//privacy.mi.com/all/zh_CN/"
                        target="_blank">小米集团隐私政策</a> <span class="sep">|</span> <a rel="nofollow"
                        href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f516fe9e2c01.html" target="_blank">小米公司儿童信息保护规则</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//m.mi.com/support/module?id=63&amp;headless=1"
                        target="_blank">小米商城隐私政策</a> <span class="sep">|</span> <a rel="nofollow"
                        href="//www.mi.com/aptitude/list?id=62" target="_blank">小米商城用户协议</a> <span class="sep">|</span>
                    <a rel="nofollow" href="//static.mi.com/feedback/" target="_blank">问题反馈</a> <span
                        class="sep">|</span> <a rel="nofollow" href="javascript:void(0);"
                        class="J_siteGlobalRegion">Select Location</a>
                </p>
                <p class="sites"><a rel="nofollow" href="http://www.mi.com/beihu" target="_blank">北京互联网法院法律服务工作站</a>
                    <span class="sep">|</span> <a rel="nofollow" href="http://www.cca.org.cn/"
                        target="_blank">中国消费者协会</a> <span class="sep">|</span> <a rel="nofollow"
                        href="http://www.bj315.org/" target="_blank">北京市消费者协会</a>
                </p>
                <p>
                    ©
                    <a href="javascript:;" target="_blank" title="mi.com">mi.com</a> 京ICP证110507号
                    <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备10046444号</a> <a
                        rel="nofollow"
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134"
                        target="_blank">京公网安备11010802020134号</a> <a href="//www.mi.com/culture-license/"
                        target="_blank">京网文[2020]0276-042号</a> <br> <a href="//www.mi.com/medical/record/"
                        target="_blank">（京）网械平台备字（2018）第00005号</a> <a href="//www.mi.com/medical/qualification/"
                        target="_blank">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a> <a href="//www.mi.com/business-license/"
                        target="_blank">营业执照</a> <a href="//www.mi.com/medical/list/" target="_blank">医疗器械质量公告</a> <br>
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0c7d4cf3b7cd88de10196e30c92e020.png"
                        target="_blank">增值电信业务许可证</a>&nbsp;网络食品经营备案 京食药网食备202010048 &nbsp;
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6859168166651511897f54fa1047fe3.png"
                        target="_blank">食品经营许可证</a> <br>
                    违法和不良信息举报电话：171-5104-4404&nbsp;<a href="https://www.mi.com/intellectual"
                        target="_blank">知识产权侵权投诉</a>&nbsp;本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                </p>
            </div>
            <div class="info-links"><a rel="nofollow"
                    href="//privacy.truste.com/privacy-seal/validation?rid=4fc28a8c-6822-4980-9c4b-9fdc69b94eb8&amp;lang=zh-cn"
                    target="_blank"><img rel="nofollow" src="//i1.mifile.cn/f/i/17/site/truste.png"
                        alt="TRUSTe Privacy Certification"></a> <a rel="nofollow"
                    href="//search.szfw.org/cert/l/CX20120926001783002010" target="_blank"><img rel="nofollow"
                        src="//s01.mifile.cn/i/v-logo-2.png" alt="诚信网站"></a> <a
                    id="_xinchacharenzheng_cert_vip_kexinweb" rel="nofollow"
                    href="//xyt.xinchacha.com/pcinfo?sn=523009637759455232&amp;certType=6" target="_blank"><img
                        rel="nofollow" src="//xyt.xinchacha.com/img/icon/icon3.png" alt="可信网站"></a> <a rel="nofollow"
                    href="//www.mi.com/service/buy/commitment/" target="_blank"><img rel="nofollow"
                        src="//i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png"
                        alt="诚信经营 放心消费"></a><a rel="nofollow"
                    href="https://webcert.cnmstl.net/cert/grade?sn=3af21034e35011eab3ea00163e068ceb"
                    class="safe-auth J_safeAuth                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              "><img
                        rel="nofollow"
                        src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/f1ee261b96ae71e845efba398efeca02.png"
                        class="img1"><img rel="nofollow"
                        src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/1cf9235c7dd1b1f8bf40721bfa8cb793.png"
                        class="img2"></a></div>
            <div class="slogan ir">探索黑科技，小米为发烧而生</div>
            <div class="slogan-bottom">让全球每个人都可以享受科技带来的美好生活</div>
        </div>
    </div>




    <script src="../js/cart.js"></script>
    <script src="../js/jq.js"></script>
    <script>



        // 判断是否登录
        let user = localStorage.getItem('login_user');
        console.log(user);
        let login = document.querySelector('.login')
        let noLogin = document.querySelector('.nologin')

        if (user) {
            login.style.display = 'block';
            login.innerHTML = user;
        } else {
            noLogin.style.display = 'block';
        }

        // 退出账号
        // 分析：不仅仅是跳转到登录，而是需要把登录信息给删除
        let loginOut = document.querySelector('.loginOut')
        // console.log(loginOut);

        loginOut.addEventListener('click', function () {
            // 先删除登录信息
            removeCookie('login_user');
            // 再跳转到登录
            location.href = './log.html';
        })







        // 购物车列表
        let oOnes;
        if (user) {
            ajax({
                type: 'get',
                data: {
                    username: user
                },
                path: '../php/showCart.php',
                success: res => {
                    console.log(res);
                    // 新用户，购物车空空如也
                    let { status, msg, list } = res;
                    if (status) {
                        let html = '';
                        list.forEach(v => {

                            let {
                                num,
                                cart_id,
                                goods_id,
                                goods_price,
                                goods_img,
                                goods_title
                            } = v;

                            html += `
                                <tr data-id="${cart_id}">
                                    <td class="checkbox">
                                        <input class="checkone" type="checkbox"  />
                                    </td>
                                    <td class="goods">
                                        <img src="${goods_img}" alt="">
                                    </td>
                                    <td class="goods">
                                        <span>${goods_title}</span>
                                    </td>
                                    <td class="price">${goods_price}元</td>
                                    <td class="count">
                                        <span class="reduce">${num > 1 ? '-' : ''}</span>
                                        <input class="count-input" type="text" value="${num}" />
                                        <span class="add">+</span>
                                    </td>
                                    <td class="subtotal">${num * goods_price}元</td>
                                    <td class="operation">
                                        <span class="delete" onclick="del(${cart_id} , this)">X</span>
                                    </td>
                                </tr>
                            `
                            let oTb = document.querySelector('tbody');
                            oTb.innerHTML = html;
                            oOnes = document.querySelectorAll('.checkone');
                            // console.log(html);
                            console.log(oOnes);
                            let oAdds = document.querySelector('.add');//加号
                            console.log(oAdds);
                            let oReduces = document.querySelector('.reduce');//减号
                            console.log(oReduces);
                            let oCount = document.querySelector('#chooseAll');//总共选了多少件
                            console.log(oCount);
                            let oMoney = document.querySelector('#priceTotal');//合计价格总
                            console.log(oMoney);
                            let oCounts = document.querySelectorAll('.count-input');//加减数量
                            console.log(oCounts);
                            // let num_sum = Document.querySelector('#chooseAll');
                            // console.log(num_sun);
                            
                            // 加号
                            for (let i = 0; i < oAdds.length; i++) {
                                oAdds[i].onclick = function () {
                                    // 数量增加
                                    this.previousElementSibling.value++;
                                    this.previousElementSibling.setAttribute('data', this.previousElementSibling.value);
                                    // 小计
                                    this.parentElement.nextElementSibling.innerHTML = this.previousElementSibling.value * this.parentElement.previousElementSibling.children[0].innerHTML;
                                    // 添加- 
                                    if (!this.previousElementSibling.previousElementSibling.innerHTML) {
                                        this.previousElementSibling.previousElementSibling.innerHTML = '-';
                                        this.previousElementSibling.previousElementSibling.classList.remove('off');
                                    }
                                    total()
                                }
                            }
                            // 减号
                            for (let i = 0; i < oReduces.length; i++) {
                                oReduces[i].onclick = function () {
                                    if (this.innerHTML === '-') {
                                        // 数量减
                                        this.nextElementSibling.value--;
                                        this.nextElementSibling.setAttribute('data', this.nextElementSibling.value)
                                        this.parentElement.nextElementSibling.innerHTML = this.nextElementSibling.value * this.parentElement.previousElementSibling.children[0].innerHTML;
                                        if (this.nextElementSibling.value == 1) {
                                            this.innerHTML = '';
                                            this.classList.add('off');
                                        }
                                        total()
                                    }
                                }
                            }
                        })


                    } else {
                        document.querySelector('.empty').style.display = 'block';
                    }

                }
            })

        } else {
            location.href = './log.html';
        }


        // 单独删除
        function del(cart_id, that) {
            ajax({
                type: 'post',
                data: {
                    cart_id
                },
                path: '../php/cart_del.php',
                success: res => {
                    console.log(res);
                    let { status, msg } = res;
                    if (status) {
                        // 删除成功
                        that.parentNode.parentNode.remove();
                    } else {
                        alert(msg);
                    }
                }
            })
        }


        // 批量删除
        let oDelAll = document.querySelector('#deleteAll');
        oOnes = document.querySelectorAll('.checkone');
        oDelAll.onclick = function () {
            // 判断单选
            for (let i = 0; i < oOnes.length; i++) {
                if (oOnes[i].checked) {
                    let cart_id = oOnes[i].parentNode.parentNode.getAttribute('data-id');
                    // 删除成功
                    console.log(user);
                    // oOnes[i].parentNode.parentNode.remove();
                    // 判断是否全部删除了  oOnes.length  来判断
                    ajax({
                        type: 'post',
                        data: {
                            cart_id
                        },
                        path: '../php/cart_del.php',
                        success: res => {
                            console.log(res);
                            let { status, msg } = res;
                            if (status) {
                                console.log('删除成功');
                                oOnes[i].parentNode.parentNode.remove();
                                total()
                            } else {
                                alert(msg);
                            }
                        }
                    })
                }
            }
        }

        //全选
        let checkAll = document.querySelector('.checkAll')
        console.log(checkAll);
        checkAll.onclick = function () {
            for (let i = 0; i < oOnes.length; i++) {
                oOnes[i].checked = this.checked;
            }
            // total()
        }

        // 反选
        for (let i = 0; i < oOnes.length; i++) {
            console.log(oOnes[i]);
            oOnes[i].onclick = function () {
                for (let i = 0; i < oOnes.length; i++) {
                    if (!oOnes[i].checked) {
                        break;
                    }
                }
                console.log(i);
                checkAll.checked = i = oOnes.length;
                total()
            }
        }

  

        function total() {
            let sum = 0;   // 数量
            let money = 0;   // 总价
            for (let i = 0; i < oOnes.length; i++) {
                if (oOnes[i].checked) {
                    let num = oOnes[i].parentElement.parentElement.querySelector('.count-input').value;
                    let price = oOnes[i].parentElement.parentElement.querySelector('.subtotal').innerHTML;
                    console.log(num);
                    console.log(price);
                    sum += num * 1;
                    money += price * 1;

                }
            }
           oCount.innerHTML = sum;
            oMoney.innerHTML = money;
        }








    </script>

</body>

</html>